<template>
  <div class="backstage_by">
    <div class="backstage">
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="角色">
            <el-select class="input" v-model="formInline.region" placeholder="请选择角色">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="formInline.sender"></el-input>
          </el-form-item>
          <el-form-item label="关联项目">
            <el-select class="input" v-model="formInline.region" placeholder="请选择关联项目">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="list">
        <div class="list_feature">
          <div class="new_tab">
            <el-button-group>
              <el-button type="primary" @click="newRole"
                style="background-color: #eaefff; color: #3768FA; border:1px solid #3768FA;" icon="el-icon-plus">创建用户
              </el-button>
            </el-button-group>
          </div>
          <p class="tab">表格设置 </p>
        </div>
        <div class="list_count">
          <template>
            <el-table :data="list" fit border style="width: 100%" height="100%">
              <el-table-column prop="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="userneme" label="用户名" width="180">
              </el-table-column>
              <el-table-column prop="telephone" label="电话" width="180">
              </el-table-column>
              <el-table-column prop="role" label="角色" width="180">
              </el-table-column>
              <el-table-column prop="associated_item" label="关联项目" width="180">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button style="color: #3768FA;" @click="reset(scope.row)" type="text" size="small">重置密码</el-button>
                  <el-button style="color: #3768FA;" @click="handleClick(scope.row)" type="text"
                    size="small">编辑</el-button>
                  <el-button style="color: #F8544B;" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div class="Pagination">
          <template>
            <div class="block">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
              </el-pagination>
            </div>
          </template>
        </div>
      </div>
      <!--  创建用户 -->
      <Drawer ref="managerComponent" :title="drawerTitle">
        <div class="drawer_count">
          <el-form ref="form" :model="row_ov" label-width="80px">
            <el-form-item label="用户姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.telephone"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-select class="input" v-model="formInline.region" placeholder="请选择角色">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联项目">
              <template>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                  @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </Drawer>
      <!-- 编辑弹窗 -->
      <Drawer ref="redact" :title="redactTitle">
        <div class="drawer_count">
          <el-form ref="form" :model="row_ov" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="formInline.sender"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="formInline.sender"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-select v-model="row_ov.activate_alarm" placeholder="请选择活动区域">
                <el-option label="开启" value="shanghai"></el-option>
                <el-option label="关闭" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="管理项目">
              <el-select v-model="row_ov.activate_alarm" placeholder="请选择活动区域">
                <el-option label="开启" value="shanghai"></el-option>
                <el-option label="关闭" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </Drawer>
    </div>

  </div>
</template>
<script>
import { getList } from '@/api/backstage'
const cityOptions = ['项目A', '项目B', '项目C', '项目D'];
export default {
  name: "Backstage",
  data() {
    return {
      formInline: {
        userManage: '',
        region: '',
        date1: '',
        date2: '',
        phone: '',
        sender: ''
      },
      form: {
        region: '',
        date1: '',
        date2: '',
      },
      row_ov: {},
      redactTitle: '编辑',
      drawerTitle: "创建角色",
      list: null,
      listLoading: true,
      currentPage: 4,

      defaultProps: {},
      // 多选框
      checkAll: false,
      checkedCities: ['项目A', '项目B'],
      cities: cityOptions,
      isIndeterminate: true
    };
  },
  created() {
    // 获取mock数据
    this.fetchData()

  },
  methods: {
    reset(tab, event) {
      console.log(tab, event);
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.row_ov = tab;
      this.$refs.redact.openDrawer()
    },
    onSubmit() {
      console.log('submit!');
    },
    handleClicktab(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSwitchChange(row) {
      // 在这里可以处理开关状态的改变，可以将数据提交到后端保存等
      console.log('开关状态改变', row.activate_alarm);
    },
    // 处理mock数据
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.data.items
        this.listLoading = false
        console.log(this.list)

      })
    },
    // 弹窗点击事件
    newRole() {
      // 通过 ref 获取子组件实例并调用 openDrawer 方法
      this.$refs.managerComponent.openDrawer();
    },
    userSide() {
      this.$refs.userSideComponent.openDrawer();
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }

  },
};
</script>
  
<style lang="scss" scoped>
.backstage_by {
  // background-color: #3768FA;
  width: 100%;
  height: 100%;
  background-color: #F0F3FA;
}

.backstage {
  width: calc(100% - 30px);
  height: calc(100vh - 68px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .search {
    background-color: white;
    border-radius: 4px;
    margin-top: 15px;

    .el-form {
      // margin:  0;
      width: calc(100% - 40px);
      margin: 0 auto;
      padding: 10px 0;
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        margin: 5px 30px 5px 0;
      }

      .search_but {
        width: 200px;
        margin-right: 0;
        margin-left: auto;
      }
    }
  }

  .list {
    width: 100%;
    height: calc(100% - 100px);

    margin-top: 10px;
    background-color: white;
    border-radius: 4px;
    flex-grow: 1;
    margin-bottom: 15px;

    .list_feature {
      width: calc(100% - 30px);
      margin: 0 auto;
      height: 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .new_tab {
        display: flex;
        align-items: center;

        .el-button-group {
          margin-right: 10px;
        }

        .parting {
          margin: 0 10px 0 0;
          width: 1px;
          height: 20px;
          background-color: #dadada;
        }

        .el-button {
          background-color: transparent;
          color: #666;
          border: 1px solid #DADADA;
          border-radius: 4px;
        }

        .el-button:hover {
          background-color: #3768FA1a;
          color: #3768FA;
          border: 1px solid #3768FA;
          border-radius: 4px;
        }
      }

      .tab {
        color: #999;
        cursor: pointer;
        font-size: 14px;
      }
    }

    .list_count {
      width: calc(100% - 30px);
      height: calc(100% - 170px);
      margin: 0 auto;
      overflow: auto;
    }

    .Pagination {
      width: calc(100% - 30px);
      margin: 30px auto 0 auto;

      .block {
        float: right;
      }
    }
  }

}

.drawer_count {
  .two_tlt {
    font-size: 14px;
  }

  .el-form-item {
    margin-top: 22px;

    .el-select {
      width: 100%;
    }
  }

}
</style>
    